<template>
  <div class="m-hotcity">
    <dl>
      <dt>热门城市：</dt>
      <dd 
        v-for="item of list" 
        :key="item.id"
        @click="handleSelect(item)"
      >
        {{ item.name === "市辖区" ? item.province : item.name }}
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: this.$store.state.geo.hotCity
    }
  },
  methods: {
    handleSelect(item) {
      this.$router.push('/')
      this.$store.dispatch('geo/setPosition', {city: item.name === '市辖区' ? item.province : item.name, province: '市辖区'})
    }
  }
}
</script>

<style lang="stylus" scoped>
  .m-hotcity
    dl
      display flex
      line-height 20px
      dt
        font-size 16px
        color #333333
        font-weight 500
      dd
        margin 0 20px
        line-height 22px
        color #666666
        cursor pointer
        &:hover
          color #31bbac
</style>
